<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MurEuMIin6NtVhghKgxOd96U"></script>
    <title>直播</title>
    <style>
        html, body, #allmap {
            padding: 0;
            margin: 0;
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .info_ul{
            font-family: "Microsoft YaHei UI";

            list-style: none;
            list-style: none;
            padding: 0px;
            margin: 0;
            line-height: 28px;
        }

        .info_ul .name span{
            color: #a2c0dc;
            font-size: 20px;
            letter-spacing: 4px;
        }

        .info_ul .name img{
            margin: 1px 4px -4px 4px;
        }

        .info_ul .phone{
            color: #a2c0dc;
            font-size: 20px;
            letter-spacing: 2px;
        }

        .info_ul .addr img{
            margin: 1px 4px -4px 4px;
        }
    </style>
</head>
<body>
<div id="allmap"></div>

<div id="info" style="display: none;">
    <ul class="info_ul">
        <li class="name"><img src="../img/user.png"><span>李一帆</span>漕河镇水管站</li>
        <li class="phone"><span>13156428632</span></li>
        <li class="addr"><img src="../img/map.png">湖北省黄冈市蕲春县</li>
        <li><a href="javascript:void(0);">进入直播</a></li>
    </ul>
</div>
</body>
</html>
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("allmap");
    var point = new BMap.Point(115.584037, 30.333302);
    map.centerAndZoom(point, 11);

    map.enableDragging();
    map.enableScrollWheelZoom();
    map.enableDoubleClickZoom();
    map.enableKeyboard();
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE}));
    map.addControl(new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1}));
    map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));

    map.setMapStyle({
        styleJson: [
            {
                "featureType": "land",
                "elementType": "all",
                "stylers": {
                    "color": "#ffffff"
                }
            }
        ]
    });

    var bdary = new BMap.Boundary();
    bdary.get("黄冈市蕲春县", function (rs) {       //获取行政区域
//        map.clearOverlays();        //清除地图覆盖物
        var count = rs.boundaries.length; //行政区域的点有多少个
        if (count === 0) {
            return;
        }
        var pointArray = [];
        for (var i = 0; i < count; i++) {
            var ply = new BMap.Polyline(rs.boundaries[i], {strokeWeight: 4, strokeColor: "#ff0000"}); //建立多边形覆盖物
            map.addOverlay(ply);  //添加覆盖物
            pointArray = pointArray.concat(ply.getPath());
        }
    });

    var myIcon = new BMap.Icon('img/live.gif',new BMap.Size(50, 50));
    var marker = new BMap.Marker(point, {icon : myIcon ,offset: new BMap.Size(0, 5)});
    map.addOverlay(marker);

    marker.addEventListener("click", openInfo);

    function openInfo(){
        var infowin = new BMap.InfoWindow($('info').innerHTML, { enableCloseOnClick: false, offset: new BMap.Size(8, -8) });
        map.openInfoWindow(infowin, point);
    }
    openInfo();
</script>
